<template>
	<div style="padding-bottom: 50px">
		<van-search
			style="height: 50px"
			placeholder="请输入单词"
			readonly
			@click="goToSearchPage"
		/>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<div style="font-size: 20px; color: #222; font-weight: 700">
				每日一句
			</div>
			<div style="font-size: 19px; color: #222; margin: 10px 0">
				{{ data.dailySentence.enContent }}
			</div>
			<div style="font-size: 16px; color: #666; margin: 10px 0">
				{{ data.dailySentence.chContent }}
			</div>
		</div>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			"
		>
			<div
				style="
					width: 45%;
					height: 60px;
					background-color: #1989fa;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				"
				@click="handleToWordBook"
			>
				单词本
			</div>
			<div
				style="
					width: 45%;
					height: 60px;
					background-color: #ff976a;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				"
				@click="handleToExtendArticle"
			>
				拓展阅读
			</div>
		</div>
		<van-swipe
			style="width: 100%; margin: 10px 0"
			:autoplay="3000"
			indicator-color="white"
		>
			<van-swipe-item v-for="item in data.banner" :key="item.id">
				<img
					:src="'http://localhost:3000/' + item.url"
					style="width: 100%; height: 240px"
					alt=""
				/>
			</van-swipe-item>
		</van-swipe>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
			v-for="ele in data.extendArticleTypeList"
			:key="ele.id"
		>
			<div style="font-size: 20px; color: #222; font-weight: 700">
				{{ ele.title }}
			</div>
			<Waterfall
				:list="ele.extend_articles"
				:breakpoints="{
					1200: { rowPerView: 3 },
					800: { rowPerView: 2 },
					500: { rowPerView: 2 },
				}"
			>
				<template #item="{ item }">
					<div
						class="water-container"
						@click="handleToExtendArticleDetail(item)"
					>
						<LazyImg :url="'http://localhost:3000/' + item.cover" />
						<p class="water-title">{{ item.title }}</p>
					</div>
				</template>
			</Waterfall>
		</div>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<h1 style="margin-left: 10px; font-size: 20px; margin-top: 10px">
				文章列表
			</h1>
			<Article />
		</div>
	</div>
</template>

<script setup>
import VocabularyBook from "../components/VocabularyBook.vue";
import Article from "../components/Article.vue";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import {
	getDailySentenceOne,
	getBanner,
	getTypeListAndArticle,
} from "@/api/basic";

const selectedWordbook = ref({
	name: "默认单词本",
	img: "default-cover.jpg",
	plan: "10",
});
const planOptions = ["10", "20", "30"];
const selectedPlanText = ref(
	"学习计划：" + selectedWordbook.value.plan + "个单词"
);

const router = useRouter();
const data = reactive({
	dailySentence: {},
	banner: [],
	extendArticleTypeList: [],
});

const handleGetDailySentence = async () => {
	const res = await getDailySentenceOne();
	data.dailySentence = res.result;
};
handleGetDailySentence();

const handleGetBanner = async () => {
	const res = await getBanner();
	data.banner = res.result;
};
handleGetBanner();

const handleGetTypeListAndArticle = async () => {
	const res = await getTypeListAndArticle({ pageNum: 1, pageSize: 7 });
	data.extendArticleTypeList = res.result.list;
};
handleGetTypeListAndArticle();

const articleDetail = articleId => {
	console.log(articleId);
	router.push({ path: "/wordList", query: { articleId: articleId } });
};
const goToSearchPage = () => {
	router.push({ name: "Search" });
};

const bookDetail = bookId => {
	router.push({ path: "/wordList", query: { bookId } });
};

const startLearning = () => {
	console.log("开始学习:", selectedWordbook.value.name);
};

const manageWordbooks = () => {
	router.push("/WordBooks");
};
const handleToWordBook = () => {
	router.push("/WordBooks");
};

const handleToExtendArticle = () => {
	router.push("/extendArticle");
};

const handleToExtendArticleDetail = item => {
	router.push({
		path: "/extendArticleDetail",
		query: {
			id: item.id,
		},
	});
};

const showPlanPicker = () => {
	const planPicker = ref("planPicker");
	if (planPicker.value) {
		planPicker.value.show();
	}
};

const updatePlan = value => {
	selectedWordbook.value.plan = value;
	selectedPlanText.value = "学习计划：" + value + "个单词";
};
const books = ref([
	{
		name: "111",
		summary: "jwij",
	},
]);
</script>

<style scoped>
.home-page {
	padding: 20px;
}

.selected-wordbook {
	display: flex;
	align-items: center;
	margin: 20px 0;
}

.cover {
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-right: 15px;
}

.info {
	flex: 1;
}

.name {
	font-weight: bold;
	margin-bottom: 8px;
}

.plan {
	cursor: pointer;
	color: #1c7ed6;
	margin-bottom: 8px;
}

.manage-link {
	font-size: 12px;
	color: #1c7ed6;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.manage-link van-icon {
	margin-right: 4px;
}

.recommended-reading {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.reading-item {
	text-align: center;
}

.book-cover {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.book-name {
	font-size: 14px;
	font-weight: bold;
	margin-top: 5px;
}

.book-summary {
	font-size: 12px;
	color: #666;
	margin-top: 3px;
}
</style>
